<template>
  <div id="chaining" >
    <c-title :text="allData.plugin_name"></c-title>
    <div class="top-pane" v-if="info">
      <div class="top-row">
        <img :src="allData.avatar_image" alt="" />
        <div class="right-rol">
          <div class="name">{{ allData.nickname }}</div>
          <div class="date" v-if="allData.become_agent_time">{{ allData.become_agent_time }}加入</div>
        </div>
      </div>
      <div class="bottom-row">
        <div class="current-rol">
          <span class="current-value">{{ allData.grade_name }}</span>
          <!-- <div class="current-name">
            <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/chaining/chaining_identity.png" alt="" />
            <span>当前身份</span>
          </div> -->
        </div>
        <div class="current-rol">
          <span class="current-value">{{ allData.become_boss_time ? allData.become_boss_time : "无" }}</span>
          <!-- <div class="current-name">
            <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/chaining/chaining_date.png" alt="" />
            <span>升级时间</span>
          </div> -->
        </div>
      </div>
    </div>
    <div class="middle-pane" v-if="info">
      <div class="top-row">
        <div class="name">我的奖励</div>
        <div class="unit">单位:元</div>
      </div>
      <div class="middle-row">
        <div class="earnings">
          <div class="all-earnings">
            <span class="value-rol">{{ allData.income_info&&allData.income_info.total_income }}</span>
            <span class="name-rol">总收益</span>
          </div>
          <div class="anticipate-earnings">
            <span class="value-rol">{{ allData.income_info&&allData.income_info.estimate_income }}</span>
            <span class="name-rol">预计收益</span>
          </div>
        </div>
        <div class="earnings">
          <div class="all-earnings">
            <span class="value-rol">{{ allData.income_info&&allData.income_info.give_amount }}</span>
            <span class="name-rol">已发放</span>
          </div>
          <div class="anticipate-earnings">
            <span class="value-rol">{{ allData.income_info&&allData.income_info.wait_settle }}</span>
            <span class="name-rol">待结算</span>
          </div>
        </div>
        <div class="earnings">
          <div class="all-earnings">
            <span class="value-rol">{{ allData.income_info&&allData.income_info.frozen_amount }}</span>
            <span class="name-rol">冻结中</span>
          </div>
          <div class="anticipate-earnings">
            <span class="value-rol">{{ allData.income_info&&allData.income_info.already_settle }}</span>
            <span class="name-rol">已结算</span>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom-pane">
      <van-tabs v-model="active" @change="changeTab" :ellipsis="false">
        <van-tab :title="item.name" :name="item.value" v-for="(item, index) in tabsList" :key="index" v-if="item.isShow">
          <!-- 奖励记录 -->
            <div class="income-record" v-show="active == 1">
              <div class="top-name">
                <span :class="rewardType == item.value ? 'name-rol active-name' : 'name-rol'" v-for="(item, index) in reward_type_array" :key="index" @click="rewardEvent(item)">{{ item.name }}</span>
              </div>
              <div class="list-data">
                <d-list :loading="loading" :finished="finished" @load="onLoad" >
                  <div class="bottom-pane" v-for="(item, index) in listData" :key="index">
                    <div class="bottom-list">
                      <div class="top-desc">
                        <span class="order">{{ item.order_sn }}</span>
                        <div class="status">
                          <img
                            :src="item.status_name == '已结算'
                                ? 'https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/chaining/chaining_blocked.png'
                                : 'https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/chaining/chaining_block.png'" />
                          <span :class="item.status_name == '已结算' ? 'status-name active-status' : item.status_name == '预计收益' ? 'status-name active-status-space' : 'status-name'">{{item.status_name}}</span>
                        </div>
                      </div>
                      <div class="date">
                        <span>{{item.created_at}}</span>
                        <span class="differential-reward" v-if="item.extra_type == 1">差额奖励</span>
                      </div>
                      <div class="amount-pane">
                        <div class="amount">
                          <div class="amount-name">奖励金额</div>
                          <div class="amount-value">{{item.amount}}</div>
                        </div>
                        <div class="amount">
                          <div class="amount-name">冻结金额</div>
                          <div class="amount-value">{{item.frozen_amount}}</div>
                        </div>
                        <div class="amount">
                          <div class="amount-name">发放金额</div>
                          <div class="amount-value">{{item.give_amount}}</div>
                        </div>
                      </div>
                    </div>
                    <div class="line" v-if="index !== listData.length - 1"></div>
                  </div>
                </d-list>
              </div>
            </div>
          <!-- 服务记录-->
          <div class="my-team" v-show="active == 2">
            <div class="direct-push-number" v-if="isShowDirect">
              <span class="people-num">直推人数：{{total}}人</span>
            </div>
            <div class="list-data">
              <d-list :loading="loading" :finished="finished" @load="onLoad" >
                <div class="list-pane"  v-for="(item, index) in listData" :key="index">
                  <div class="list-rol">
                    <div class="top">
                      <div class="left">
                        <img :src="item.avatar_image" alt="" v-if="item.avatar_image"/>
                        <span class="name">{{item.nickname ? item.nickname : ''}}</span>
                      </div>
                      <div class="right">身份:{{item.grade_name}}</div>
                    </div>
                    <div class="middle-pane-team">
                      <div class="box-rol">
                        <span class="box-rol">会员ID</span>
                        <span class="value">{{item.child_id}}</span>
                      </div>
                      <div class="box-rol mobile-rol">
                        <span class="name">手机号码</span>
                        <span class="value">{{item.mobile}}</span>
                      </div>
                      <div class="box-rol">
                        <span class="name">状态</span>
                        <span class="value status-name">{{item.status_name}}</span>
                      </div>
                    </div>
                  </div>
                  <div class="line" v-if="index !== listData.length - 1"></div>
                </div>
              </d-list>
            </div>
          </div>
          <!-- 帮扶记录 -->
          <div class="help-records" v-show="active == 3">
            <div class="list-data">
              <d-list :loading="loading" :finished="finished" @load="onLoad" >
                <div class="records-pane" v-for="(item, index) in listData" :key="index">
                  <div class="records-list">
                    <div class="date">
                      <span class="date-name">有效期: </span>
                      <span class="date-value">{{item.created_at}} - {{item.expire_time}}</span>
                    </div>
                    <div class="help-condition">绩效考核条件: 
                      <span>{{item.condition ? item.condition.help_num : ""}}</span>
                      <span class="check-detail" @click="showPopup(item.id,'help_num')">查看详情 <van-icon name="arrow" class="icon-right" /> </span>
                    </div>
                    <div class="help-condition" v-if="item.condition && item.condition.help_team_num"><span class="space-gap">绩效考核条件:</span>
                      <span>{{item.condition ? item.condition.help_team_num : ""}}</span>
                      <span class="check-detail" @click="showPopup(item.id,'help_team_num')">查看详情 <van-icon name="arrow" class="icon-right" /> </span>
                    </div>
                    <div class="status">
                      <span class="status-value">状态: {{item.status_name}}</span>
                      <!-- <span class="check-detail" @click="showPopup(item.id,item.condition.help_num)">查看详情 <van-icon name="arrow" class="icon-right" /> </span> -->
                    </div>
                  </div>
                  <div class="line" v-if="index !== listData.length - 1"></div>
                </div>
              </d-list>
            </div>
          </div>
          <div class="subsidy" v-show="active == 4">
            <div class="list-data" v-if="subsidyData">
              <div class="subsidy-top-pane">
                <div class="subsidy-top-name">
                  <span class="left-name">一星补贴</span>
                  <div class="right-box">
                    <img
                      :src="subsidyData.one_star.star_rating >= 1
                          ? 'https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/chaining/chaining_blocked.png'
                          : 'https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/chaining/chaining_block.png'"/>
                    <span :class="subsidyData.star_rating >= 1 ?  'name status-name' : 'name'">{{subsidyData.one_star.star_rating >= 1 ? '已完成' : '未完成'}}</span>
                  </div>
                </div>
                <div class="money-value one-star" v-for="(item,index) in subsidyData.one_star.condition">{{item}}</div>
                <div class="subsidy-top-name">
                  <span class="left-name">二星补贴</span>
                  <div class="right-box">
                    <img
                      :src="subsidyData.two_star.star_rating >= 1
                          ? 'https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/chaining/chaining_blocked.png'
                          : 'https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/chaining/chaining_block.png'"/>
                    <span :class="subsidyData.two_star.star_rating >= 1 ?  'name status-name' : 'name'">{{subsidyData.two_star.star_rating >= 1 ? '已完成' : '未完成'}}</span>
                  </div>
                </div>
                <div class="money-value one-star" v-for="(item,index) in subsidyData.two_star.condition">{{item}}</div>
              </div>
              <div class="type-card" v-if="subsidyData.team_boss_condition == 1 && subsidyData.see_dot_condition == 1">
                <span :class="type_card == 0 ? 'point-prize public-sty active-sty' : 'point-prize public-sty'" @click="type_card = 0">{{allData.see_dot_name}}金额</span>
                <span :class="type_card == 1 ? 'public-sty active-sty' : 'public-sty'" @click="type_card = 1">直推{{allData.agent_level_name}}的团队中的{{allData.boos_level_name}}</span>
              </div>
              <div class="member-detail" v-for="(item,index) in subsidyData.child_see_dot" :key="index" v-if="type_card == 0 && subsidyData.see_dot_condition == 1">
                <div class="member-name">
                  <img :src="item.avatar_image" alt="">
                  <span class="name">{{item.nickname}}(ID:{{item.child_uid}})</span>
                </div>
                <div class="get-money">{{allData.see_dot_name}}金额已获得{{ item.see_dot_amount }}元</div>
              </div>
              <div class="boss-direct-push" v-if="type_card == 1 && subsidyData.team_boss_condition == 1" >
                <block v-for="(item, index) in subsidyData.child_teams" :key="index">
                  <div class="identity-row">
                    <div class="nickname-rol">
                      <img :src="item.avatar" alt="" />
                      <span class="nickname">{{item.nickname}}</span>
                    </div>
                    <span class="identity-name">身份:{{item.grade_name}}</span>
                  </div>
                  <div class="detail-data">
                    <div class="detail-pane">
                      <div class="detail-row">
                        <div class="top-rol">会员ID</div>
                        <div class="bottom-rol bottom-team">{{item.member_id}}</div>
                      </div>
                      <div class="detail-row">
                        <div class="top-rol">成为时间</div>
                        <div class="bottom-rol bottom-team">{{item.become_agent_time}}</div>
                      </div>
                      <div class="detail-row">
                        <div class="top-rol">升级时间</div>
                        <div class="bottom-rol bottom-team">{{item.become_boss_time}}</div>
                      </div>
                    </div>
                  </div>
                </block>
              </div>
            </div>
          </div>
          <!-- 平均分红  -->
          <div class="average-dividend" v-show="active == 5">
            <div class="average-dividend-head">
              <span class="fz-28 c-00001C">平均分红额度：{{average}}</span>
              <span class="c-6E6E79 fz-24" @click="show_dividend">查看明细></span>
            </div>
            <div class="average-dividend-content">
              <div class="average-dividend-content-item" v-for="item in listData" :key="item.id">
                <div class="average-dividend-content-top">{{ item.created_at }}</div>
                <div class="average-dividend-content-bottom">
                  <div class="colum">
                    <span class="c-6E6E79 fz-24">冻结收入</span>
                    <span class="fz-28">{{ item.froze_amount }}</span>
                  </div>
                  <div class="colum">
                    <span class="c-6E6E79 fz-24">{{allData.boos_level_name}}人数</span>
                    <span class="fz-28">{{ item.boss_num }}</span>
                  </div>
                  <div class="colum">
                    <span class="c-6E6E79 fz-24">奖励金额</span>
                    <span class="c-F15353 fz-28">{{item.dividend_amount}}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>

    <van-popup v-model="popupShow" closeable position="bottom" :style="{ height: '40%' }">
      <div class="popup-pane">
        <div class="name">查看详情</div>
        <block v-for="(item, index) in detailList" :key="index">
          <div class="identity-row">
            <div class="nickname-rol">
              <img :src="item.avatar_image" alt="" />
              <span class="nickname">{{item.nickname}}</span>
            </div>
            <span class="identity-name">身份:{{item.grade_name}}</span>
          </div>
          <div class="detail-data">
            <div class="detail-pane">
              <div class="detail-row">
                <div class="top-rol">会员ID</div>
                <div class="bottom-rol">{{ item.help_uid }}</div>
              </div>
              <div class="detail-row">
                <div class="top-rol">成为时间</div>
                <div class="bottom-rol">{{item.become_agent_time}}</div>
              </div>
              <div class="detail-row">
                <div class="top-rol">升级时间</div>
                <div class="bottom-rol">{{item.become_boss_time}}</div>
              </div>
            </div>
          </div>
        </block>
      </div>
    </van-popup>

    <van-popup
      v-model="dividendShow"
      round
      closeable
      ref="dividendPopup"
      position="bottom"
      :style="{ height: '45%' }"
      @opened="opened"
    >
      <p class="dividend-popup-title">平均分红额度明细</p>
      <div v-if="dividend_list&&dividend_list.length!==0" class="dividend-popup-box" ref="dividendPopup">
        <div class="dividend-popup-box-item" v-for="(item,i) in dividend_list" :key="i">
          <span class="fz-28">{{item.created_at}}</span>
          <span class="fz-28" :class="{'c-F15353':item.change_value>0}">{{item.change_value}}</span>
          <div class="dividend-popup-line" v-if="i+1!==dividend_list.length"></div>
        </div>
      </div>
    </van-popup>

  </div>
</template>
<script>
import index_controller from "./index_controller";

export default index_controller;
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
::v-deep .van-popup__close-icon {
  color: #707070;
  font-size: 17px;
}
#chaining {
  padding: 0.4rem 0.6rem;
  .dividend-popup-title{
    text-align: center;
    margin: 1.4375rem 0 2.0313rem;
  }
  .dividend-popup-box-item{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: .8438rem;
    margin-bottom: 0.9688rem;
    .c-F15353{
      color: #F15353;
    }
  }
  .dividend-popup-line{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: #F0F0F1;
  }
  .dividend-popup-box{
    padding: 0 1rem;
    overflow-y: scroll;
    .fz-28{
      font-size: .875rem;
    }
  }
  .average-dividend{
    .colum{
      display: flex;
      flex-direction: column;
    }
    .c-6E6E79{
      color: #6E6E79;
    }
    .c-F15353{
      color: #F15353;
    }
    &-content{
      padding: 1.375rem 0.75rem 1.0625rem;
    }
    &-content-item{
      margin-bottom: .625rem;
      border-radius: 0.3125rem;
      border: 1px solid #F0F0F1;
    }
    &-content-top{
      background: #FAFAFA;
      padding: .625rem .75rem;
      text-align: left;
    }
    &-content-bottom{
      display: flex;
      justify-content: space-around;
      margin-top: 0.9063rem;
      margin-bottom: 1rem;
    }
    &-head{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1.375rem 0.75rem 0;
    }
    .fz-28{
      font-size: .875rem;
    }
    .c-00001C{
      color: #00001C;
    }
    .fz-24{
      font-size: 0.75rem;
    }

  }

 .detail-popup .between{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.9688rem;
  padding-bottom: 0.6563rem;
  box-sizing: border-box;
}
 .detail-popup .between::after{
  content:"";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: #F0F0F1;
}
 .detail-popup .title{
  text-align: center;
  margin-top: 1.4375rem;
  font-size: 0.9375rem;
  margin-bottom: 2.0313rem;
  font-weight: 500;
}

  .detail-popup .box{
    padding: 0 1rem;
    box-sizing: border-box;
  }
  .m-24{
    margin: 0 0.75rem;
  }
  .between{
  display: flex;
  align-items: center;
  justify-content: space-between;
  }
  .mb-34{
    margin-bottom: 1.0625rem;
  }
  .c-6E6E79{
    color: #6E6E79;
  }
  .average-top{
    background-color: #F0F0F1;
    padding: 0.625rem 0.75rem;
    font-size: 0.75rem;
    text-align: left;
  }
  .average-bottom{
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-top: 0.9063rem;
    padding-bottom: 1rem;
    box-sizing: border-box;
  }
  .center{
    text-align: center;
  }
  .details{
  display: flex;
  align-items: center;
  color:#6E6E79;
  font-size: 0.75rem;
}
  .top-pane {
    background: white;
    border-radius: 0.2rem;
    padding: 0.6rem;
    margin-bottom: 0.4rem;
    .top-row {
      display: flex;
      margin-bottom: 0.4rem;
      img {
        width: 2.2rem;
        height: 2.2rem;
        margin: 0;
        border-radius: 50%;
      }
      .right-rol {
        margin-left: 0.6rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .name {
          font-size: 0.85rem;
          font-weight: 400;
          color: #333333;
          display: flex;
        }
        .date {
          font-size: 0.8rem;
          font-weight: 400;
          color: #999999;
          display: flex;
        }
      }
    }
    .bottom-row {
      display: flex;
      margin: 0 2rem;
      justify-content: space-between;
      .current-rol {
        display: flex;
        flex-direction: column;
        align-items: center;
        .current-value {
          font-size: 0.85rem;
          font-weight: bold;
          line-height: 1.2rem;
          color: #333333;
          margin-bottom: 0.2rem;
        }
        .current-name {
          font-size: 0.8rem;
          font-weight: 400;
          color: #999999;
          margin-top: 0.4rem;
          display: flex;
          align-items: center;
          img {
            width: 0.8rem;
            height: 0.8rem;
            margin-right: 0.2rem;
            border-radius: 50%;
          }
        }
      }
    }
  }
  .middle-pane {
    background: white;
    padding: 0.6rem 0.6rem 0.8rem 0.6rem;
    margin-bottom: 0.4rem;
    .top-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 0.6rem;
      .name {
        font-size: 0.75rem;
        font-weight: bold;
        line-height: 1.05rem;
        color: #333333;
      }
      .unit {
        font-size: 0.8rem;
        font-weight: 400;
        line-height: 0.825rem;
        color: #999999;
        letter-spacing: 0.1rem;
      }
    }
    .middle-row {
      display: flex;
      justify-content: space-evenly;
      .earnings {
        .all-earnings {
          display: flex;
          flex-direction: column;
          .value-rol {
            font-size: 0.85rem;
            font-weight: bold;
            line-height: 1.2rem;
            color: #333333;
            margin-bottom: 0.3rem;
            word-break: break-all;
          }
          .name-rol {
            font-size: 0.8rem;
            font-weight: 400;
            line-height: 0.825rem;
            color: #999999;
            word-break: keep-all;
          }
        }
        .anticipate-earnings {
          display: flex;
          flex-direction: column;
          margin-top: 0.6rem;
          .value-rol {
            font-size: 0.85rem;
            font-weight: bold;
            line-height: 1.2rem;
            color: #333333;
            margin-bottom: 0.3rem;
            word-break:break-all;
          }
          .name-rol {
            font-size: 0.8rem;
            font-weight: 400;
            line-height: 0.825rem;
            color: #999999;
            word-break: keep-all;
          }
        }
      }
    }
  }
  .bottom-pane {
    background: white;
    .income-record {
      .top-name {
        padding: 0.8rem 0 0.2rem 0;
        display: flex;
        margin-left: 0.6rem;
        overflow-x: auto;
        .name-rol {
          background: #f5f5f5;
          border-radius: 0.1rem;
          font-size: 0.8rem;
          font-weight: 400;
          color: #999;
          padding: 0.3rem 0.8rem;
          margin-right: 1.5rem;
          white-space: nowrap;
        }
        .active-name {
          background: rgba(227, 35, 35, 0.15) !important;
          color: #e32323 !important;
        }
      }
      .list-data {
        padding: 0.6rem 0 0.6rem 0;
        .bottom-pane {
          .bottom-list {
            padding: 0.6rem 0.3rem 0.6rem 0.6rem;
            background: #f5f5f5;
            border-radius: 0.1rem;
            margin: 0 0.6rem 0 0.6rem;
            .top-desc {
              display: flex;
              justify-content: space-between;
              .order {
                font-size: 0.8rem;
                font-weight: 400;
                line-height: 1rem;
                color: #333333;
              }
              .active-status {
                color: #e32323 !important;
              }
              .status {
                font-size: 0.7rem;
                font-weight: 400;
                // line-height: 0.825rem;
                line-height: 1.35rem;
                img {
                  width: 3.6rem;
                  height: 1.3rem;
                  position: absolute;
                  right: 0.6rem;
                }
                .status-name {
                  color: white;
                  position: absolute;
                  right: 1.2rem;
                }
              }
              .active-status-space {
                right: 0.85rem !important;
              }
            }
            .date {
              display: flex;
              font-size: 0.75rem;
              font-weight: 400;
              line-height: 0.825rem;
              color: #999999;
              margin: 0.4rem 0 0.8rem 0;
              justify-content: space-between;
              .differential-reward {
                color: #e32323 ;
                font-weight: 500;
                margin-top: 0.15rem;
              }
            }
            .amount-pane {
              display: flex;
              justify-content: space-around;
              .amount {
                display: flex;
                flex-direction: column;
                .amount-name {
                  font-size: 0.8rem;
                  font-weight: 400;
                  line-height: 0.825rem;
                  color: #999999;
                }
                .amount-value {
                  font-size: 0.85rem;
                  font-weight: bold;
                  line-height: 1rem;
                  color: #333333;
                  margin-top: 0.4rem;
                }
              }
            }
          }
          .line {
            width: 100%;
            margin: 0.8rem 0;
            background: #e7e7e7;
            height: 0.05rem;
          }
        }
      }
    }
    .my-team {
      background: white;
      .direct-push-number {
        margin: 0.6rem;
        background: rgba(227, 35, 35, 0.1);
        border-radius: 0.1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        .people-num {
          font-size: 0.8rem;
          font-weight: 400;
          color: #e32323;
          margin: 0.25rem 0;
        }
      }
      .list-data {
        padding-bottom: 0.975rem;
        .list-pane {
          .list-rol {
            margin: 0 0.6rem;
            .top {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 0.4rem;
              .left {
                display: flex;
                align-items: center;
                img {
                  height: 1.8rem;
                  width: 1.8rem;
                  margin: 0;
                  border-radius: 50%;
                  margin-right: 0.2rem;
                }
                .name {
                  font-size: 0.85rem;
                  font-weight: 400;
                  line-height: 1rem;
                  color: #333333;
                }
              }
              .right {
                font-size: 0.8rem;
                font-weight: 400;
                line-height: 0.825rem;
                color: #999999;
                letter-spacing: 0.1rem;
              }
            }
            .middle-pane-team {
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 0.6rem;
              background: #f5f5f5;
              border-radius: 0.1rem;
              .box-rol {
                display: flex;
                flex-direction: column;
                align-items: center;
                .name {
                  font-size: 0.8rem;
                  font-weight: 400;
                  line-height: 0.825rem;
                  color: #999999;
                }
                .status-name {
                  color: #e32323 !important;
                }
                .value {
                  font-size: 0.8rem;
                  font-weight: bold;
                  line-height: 0.825rem;
                  color: #333333;
                  margin-top: 0.5rem;
                }
              }
              .mobile-rol {
                align-items: flex-start;
              }
            }
          }
          .line {
            width: 100%;
            margin: 1rem 0;
            background: #e7e7e7;
            height: 0.05rem;
          }
        }
      }
    }
    .help-records {
      .list-data {
        padding-bottom: 0.975rem;
        .records-pane {
          background: white;
          .records-list {
            background: #f5f5f5;
            border-radius: 0.1rem;
            padding: 0.65rem;
            margin: 0.6rem 0.6rem 0 0.6rem;
            .date {
              display: flex;
              .date-name {
                font-size: 0.8rem;
                font-weight: 400;
                line-height: 0.825rem;
                color: #333333;
              }
              .date-value {
                font-size: 0.8rem;
                font-weight: 400;
                line-height: 0.825rem;
                color: #999999;
                margin-left: 0.2rem;
              }
            }
            .help-condition {
              display: flex;
              font-size: 0.8rem;
              font-weight: 400;
              color: #333333;
              margin: 0.68rem 0;
              align-items: center;
              .space-gap {
                opacity: 0;
              }
            }
            .status {
              display: flex;
              .status-value {
                font-size: 0.8rem;
                font-weight: 400;
                line-height: 0.825rem;
                color: #333333;
              }
              .check-detail {
                font-size: 0.8rem;
                font-weight: 400;
                line-height: 0.825rem;
                color: #e32323;
                margin: 0 0 0 0.58rem;
                .icon-right {
                  color: #999999;
                }
              }
            }
            .check-detail {
              font-size: 0.8rem;
              font-weight: 400;
              line-height: 0.825rem;
              color: #e32323;
              margin: 0 0 0 0.58rem;
              .icon-right {
                color: #999999;
              }
            }
          }
          .line {
            width: 100%;
            margin: 0.8rem 0;
            background: #e7e7e7;
            height: 0.05rem;
          }
        }
      }
    }

    .subsidy {
      padding-bottom: 0.975rem;
      .list-data {
        .subsidy-top-pane {
          background: #F5F5F5;
          margin: 0.6rem 0.6rem 0 0.6rem;
          padding: 0.6rem;
          .subsidy-top-name {
            display: flex;
            width: 100%;
            justify-content: space-between;
            .left-name {
              font-size: 0.8rem;
              font-weight: bold;
              color: #333333;
            }
            .status-name {
              color: #e32323 !important;
            }
            .right-box {
              line-height: 1.3rem;
              position: relative;
              font-size: 0.7rem;
              img {
                width: 3.4rem;
                height: 1.3rem;
                position: absolute;
                right: -0.6rem;
                top: 0;
              }
              .name {
                color: white;
                position: relative;
                right: -1px;
              }
            }
          }
          .money-value {
            display: flex;
            font-size: 0.75rem;
            line-height: 0.83rem;
            color: #999999;
            margin-top: 0.4rem;
          }
          .one-star {
            margin-bottom: 0.5rem;
          }
        }
        .type-card {
          display: flex;
          margin: 0.5rem 0.6rem 0 0.6rem;
          .point-prize {
            margin-right: 1rem;
          }
          .public-sty {
            padding: 0.25rem 0.35rem;
          }
          .active-sty {
            background: #e32323;
            color: white;
            border-radius: 0.2rem;
          }
        }
        .member-detail {
          margin: 1rem 0.6rem;
          .member-name {
            display: flex;
            align-items: center;
            img {
              width: 1.73rem;
              height: 1.73rem;
              margin: 0;
              border-radius: 50%;
            }
            .name {
              font-size: 0.8rem;
              font-weight: 400;
              color: #333333;
              margin-left: 0.3rem;
            }
          }
          .get-money {
            display: flex;
            font-size: 0.75rem;
            font-weight: 400;
            color: #999999;
            margin-top: 0.5rem;
          }
        }
        .line {
          width: 100%;
          margin: 0.8rem 0;
          background: #e7e7e7;
          height: 0.05rem;
        }
      }
    }
  }
  .popup-pane {
    .name {
      font-size: 0.85rem;
      font-weight: 400;
      line-height: 1.05rem;
      color: #333333;
      margin-top: 1.4rem;
    }
  }
}
  .identity-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0.6rem;
    .nickname-rol {
      display: flex;
      align-items: center;
      img {
        width: 1.8rem;
        height: 1.8rem;
        margin: 0;
        border-radius: 50%;
      }
      .nickname {
        margin-left: 0.2rem;
        font-size: 0.75rem;
        font-weight: 400;
        line-height: 1rem;
        color: #333333;
      }
    }
    .identity-name {
      font-size: 0.8rem;
      font-weight: 400;
      color: #999999;
      letter-spacing: 0.1rem;
    }
  }
  .detail-data {
    border-radius: 0.1rem;
    margin: 0 0.6rem;
    .detail-pane {
      display: flex;
      justify-content: space-between;
      padding: 0.6rem;
      margin-bottom: 0.6rem;
      background: #f5f5f5;
      .detail-row {
        display: flex;
        flex-direction: column;
        .top-rol {
          font-size: 0.8rem;
          font-weight: 400;
          line-height: 0.825rem;
          color: #999999;
        }
        .bottom-rol {
          font-size: 0.8rem;
          font-weight: bold;
          line-height: 0.825rem;
          color: #333333;
          margin-top: 0.5rem;
        }
        .bottom-team {
          font-size: 0.75rem;
        }
      }
    }
  }
</style>
